import React from "react";
export default class App extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            arr: [],
            arr1: [],
            tabIndex: -1
        }
    }
    componentDidMount() {
        this.$axios
            .get(
                " https://apipc-xiaotuxian-front.itheima.net/home/banner"
            )
            .then(res => {
                if (res.data.msg == '操作成功') {
                    this.state.arr1 = res.data.result
                    this.setState({
                        arr1: this.state.arr1
                    }, () => {
                        this.swiperInit()
                    }
                    );
                }
                // console.log(res);
            });
    }
    swiperInit() {
        new Swiper(".swiper", {
            effect: "fade",
            keyboard: true,
            loop: true,
            autoplay: {
                pauseOnMouseEnter: true,
                disableOnInteraction: false,
            },
            pagination: {
                el: ".swiper-pagination",
                clickable: true,
            },
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            },
        });
    }
    render() {
        return <div>
            <div className="lbt">
                <div className="swiper">
                    <ul className="swiper-wrapper">
                        {this.state.arr1.map((i, index) => {
                            return <li className="swiper-slide" key={index}>
                                <img src={i.imgUrl} alt="" />
                            </li>
                        })}
                        <div className="swiper-pagination"></div>
                        <div className="swiper-button-prev hide"></div>
                        <div className="swiper-button-next hide"></div>
                    </ul>
                </div>
            </div>
        </div>
    }
}